<template>
  <div class="all">
    <div class="top">
      <div class="top-left">
        <div class="prefix"></div>
        <div class="text">预约体检</div>
      </div>
      <div class="top-right">
        <button class="in">删除</button>
        <router-link to="/Form" class="linka"><button class="out">新增</button></router-link>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-top">
        <div class="bottom-top-left1">
          <div class="bottom-top-left">
            <div class="one other">
              <img
                src="https://cdn7.axureshop.com/demo/1634752/images/%E9%A2%84%E7%BA%A6%E6%8C%82%E5%8F%B7/u5785_selected.png"
                alt=""
              /><span>全部</span>
            </div>
            <div class="two other">
              <img
                src="https://cdn7.axureshop.com/demo/1634752/images/%E9%A2%84%E7%BA%A6%E6%8C%82%E5%8F%B7/u5785.png"
                alt=""
              /><span>待体检</span>
            </div>
            <div class="three other">
              <img
                src="https://cdn7.axureshop.com/demo/1634752/images/%E9%A2%84%E7%BA%A6%E6%8C%82%E5%8F%B7/u5785.png"
                alt=""
              /><span>已完成</span>
            </div>
            <div class="four other">
              <img
                src="https://cdn7.axureshop.com/demo/1634752/images/%E9%A2%84%E7%BA%A6%E6%8C%82%E5%8F%B7/u5785.png"
                alt=""
              /><span>已退款</span>
            </div>
          </div>
        </div>

        <div class="bottom-top-right">
          <div class="time">
            <div class="block">
              <el-date-picker
                v-model="value2"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
            <span>~</span>
            <div class="block">
              <el-date-picker
                v-model="value2"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="name"><button>搜索</button></div>
        </div>
      </div>
      <div class="bottom2">
        <div class="bottom2-top">
          <el-row>
            <el-col :span="1"
              ><div class="grid-content bg-purple">
                <img
                  src="https://cdn7.axureshop.com/demo/1634752/images/%E9%A2%84%E7%BA%A6%E6%8C%82%E5%8F%B7/u5658.svg"
                  alt=""
                /></div
            ></el-col>
            <el-col :span="1"
              ><div class="grid-content bg-purple-light">姓名</div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple">就诊卡号</div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content bg-purple-light">身份证号</div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple">手机号码</div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple-light">挂号科室</div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple-light">挂号类型</div></el-col
            >
            <el-col :span="1"
              ><div class="grid-content bg-purple-light">挂号费</div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple-light">挂号状态</div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple-light">就诊日期</div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple-light">候诊时间</div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content bg-purple-light">预约时间</div></el-col
            >
            <el-col :span="1"
              ><div class="grid-content bg-purple-light">操作</div></el-col
            >
          </el-row>
          <div class="more" v-for="(num, index) in 2" :key="index">
            <el-row v-for="(val, index) of bianli" :key="index">
              <el-col :span="1"
                ><div class="grid-content bg-purple">
                  <img
                    src="https://cdn7.axureshop.com/demo/1634752/images/%E9%A2%84%E7%BA%A6%E6%8C%82%E5%8F%B7/u5658.svg"
                    alt=""
                  /></div
              ></el-col>
              <el-col :span="1"
                ><div class="grid-content bg-purple-light">
                  {{ val.name }}
                </div></el-col
              >
              <el-col :span="2"
                ><div class="grid-content bg-purple">
                  {{ val.CardNumber }}
                </div></el-col
              >
              <el-col :span="3"
                ><div class="grid-content bg-purple-light">
                  {{ val.IDnumber }}
                </div></el-col
              >
              <el-col :span="2"
                ><div class="grid-content bg-purple">
                  {{ val.telephone }}
                </div></el-col
              >
              <el-col :span="2"
                ><div class="grid-content bg-purple-light">
                  {{ val.Department }}
                </div></el-col
              >
              <el-col :span="2"
                ><div class="grid-content bg-purple-light">
                  {{ val.type }}
                </div></el-col
              >
              <el-col :span="1"
                ><div class="grid-content bg-purple-light">
                  {{ val.fee }}
                </div></el-col
              >
              <el-col :span="2"
                ><div class="grid-content bg-purple-light">
                  {{ val.status }}
                </div></el-col
              >
              <el-col :span="2"
                ><div class="grid-content bg-purple-light">
                  {{ val.Visit }}
                </div></el-col
              >
              <el-col :span="2"
                ><div class="grid-content bg-purple-light">
                  {{ val.Waiting }}
                </div></el-col
              >
              <el-col :span="3"
                ><div class="grid-content bg-purple-light">
                  {{ val.appointment }}
                </div></el-col
              >
              <el-col :span="1"
                ><div class="grid-content bg-purple-light">
                  <img
                    class="change"
                    src="../../../img/Booking/change.png"
                    alt=""
                  /></div
              ></el-col>
            </el-row>
          </div>
        </div>
        <div class="bottom2-bottom"></div>
      </div>
      <div class="bottom3">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
};
</script>
<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
};
</script>
<script>
export default {
  name: "GoodsList",
  props: ["goods"],
  data() {
    return {
      bianli: [
        {
          name: "赵马",
          CardNumber: 5000909000,
          IDnumber: 371890199507070909,
          telephone: 15678900988,
          Department: "内科-肾内科",
          type: "专家号",
          fee: "60.00",
          status: "已就诊",
          Visit: "2019-08-15",
          Waiting: "9:30",
          appointment: "2019-08-15 14:02:26",
        },
        {
          name: "赵马",
          CardNumber: 5000909000,
          IDnumber: 371890199507070909,
          telephone: 15678900988,
          Department: "内科-肾内科",
          type: "专家号",
          fee: "60.00",
          status: "已就诊",
          Visit: "2019-08-15",
          Waiting: "9:30",
          appointment: "2019-08-15 14:02:26",
        },
        {
          name: "赵马",
          CardNumber: 5000909000,
          IDnumber: 371890199507070909,
          telephone: 15678900988,
          Department: "内科-肾内科",
          type: "专家号",
          fee: "60.00",
          status: "已就诊",
          Visit: "2019-08-15",
          Waiting: "9:30",
          appointment: "2019-08-15 14:02:26",
        },
        {
          name: "赵马",
          CardNumber: 5000909000,
          IDnumber: 371890199507070909,
          telephone: 15678900988,
          Department: "内科-肾内科",
          type: "专家号",
          fee: "60.00",
          status: "已就诊",
          Visit: "2019-08-15",
          Waiting: "9:30",
          appointment: "2019-08-15 14:02:26",
        },
        {
          name: "赵马",
          CardNumber: 5000909000,
          IDnumber: 371890199507070909,
          telephone: 15678900988,
          Department: "内科-肾内科",
          type: "专家号",
          fee: "60.00",
          status: "已就诊",
          Visit: "2019-08-15",
          Waiting: "9:30",
          appointment: "2019-08-15 14:02:26",
        },
      ],
    };
  },
  methods: {
    sendToApp() {
      this.$bus.$emit("busHandler", { name: "zhangsan", age: 18 });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.el-dropdown {
  padding-left: 35px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.all {
  height: 100%;
  color: #333333;
  background-color: #f3f8ff;
}
.top {
  display: flex;
  height: 90px;
  /* border: 1px solid red; */
}
.top-left,
.top-right {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: justify;
  /* width:100%;
  height: 200px; */
  /* border: 1px solid red; */
}
.top-right {
  margin-left: 865px;
}
.prefix {
  width: 24px;
  height: 8px;
  background: inherit;
  background-color: inherit;
  background-color: rgba(0, 110, 255, 1);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-size: 16px;
  color: #006eff;
  margin-right: 20px;
}
.text {
  font-family: "PingFangHK-Regular", "PingFang HK", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  letter-spacing: 1px;
  white-space: nowrap;
  text-transform: none;
  color: #333333;
}
.in,
.out {
  text-align: center;
  text-transform: none;
  font-size: 14px;
  width: 80px;
  height: 40px;
  background: inherit;
  background-color: inherit;
  background-color: rgba(0, 110, 255, 0.0980392156862745);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  color: #006eff;
  line-height: 20px;
}
.in:hover,
.out:hover {
  color: aliceblue;
  background-color: #006eff;
}
.in {
  margin-right: 20px;
}
.bottom {
  background-color: white;
  width: 1150px;
  height: 781px;
  margin: 0 auto;
  padding: 20px;
}
.bottom-top {
  position: relative;
}
.bottom-top-left1 {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 10px;
}
.bottom-top-left {
  display: flex;
  padding-top: 20px;
}
.bottom-top {
  height: 70px;
  width: 100%;
  /* border: 1px solid red; */
}
.other {
  display: inline-block;
  display: flex;
  font-size: 14px;
  text-align: left;
  line-height: 24px;
}
.other img {
  display: block;
}
.other span {
  padding: 0 10px 0 15px;
}
.bottom2-top img,
.bottom2-top .fl {
  display: inline-block;
}
.bottom-top-right {
  position: absolute;
  top: 20px;
  right: 0;
}
.time,
.bottom-top-right,
.block,
.offices {
  display: inline-block;
  margin-right: 10px;
}
.block {
  margin: 0 10px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 140px;
}
.offices {
  position: relative;
  border: 1px solid #e8f2ff;
  width: 160px;
  height: 30px;
  padding-top: 10px;
}
.name {
  display: inline-block;
}
.name input {
  width: 160px;
  height: 40px;
  border: 1px solid #e8f2ff;
}
.name button {
  width: 64px;
  height: 40px;
  margin-left: 10px;
  background: inherit;
  background-color: inherit;
  background-color: rgba(0, 110, 255, 1);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  color: #ffffff;
  line-height: 20px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.grid-content {
  font-size: 12px;
  color: #999999;
  line-height: 36px;
  text-align: center;
}
.bottom3 .block {
  display: flex;
  justify-content: center;
}
.change {
  width: 16px;
  height: 20px;
}
.more {
  margin-bottom: 20px;
}
</style>
